{% extends "base.html" %}

{% block styles %}
<link href="{{ url_for('static', filename='css/resource.css') }}" rel="stylesheet">
<style>
.stats-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.stats-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
}

.stats-icon {
    font-size: 2rem;
    color: #4e4376;
    margin-bottom: 0.5rem;
}

.stats-number {
    font-size: 1.8rem;
    font-weight: 600;
    color: #2b5876;
}

.stats-label {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
</style>
{% endblock %}

{% block content %}
<div class="header">
    <h2 class="mb-0">资源管理</h2>
    <div class="header-actions">
        <button class="btn btn-outline-primary" onclick="refreshResourceList()">
            <i class="bi bi-arrow-clockwise"></i> 刷新列表
        </button>
    </div>
</div>

<!-- 资源统计卡片 -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body text-center">
                <i class="bi bi-collection stats-icon"></i>
                <div class="stats-number">{{ stats.total_count }}</div>
                <div class="stats-label">总资源数</div>
                <div class="text-muted mt-1">{{ stats.total_size }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body text-center">
                <i class="bi bi-file-text stats-icon"></i>
                <div class="stats-number">{{ stats.text_count }}</div>
                <div class="stats-label">文本文档</div>
                <div class="text-muted mt-1">{{ stats.text_size }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body text-center">
                <i class="bi bi-image stats-icon"></i>
                <div class="stats-number">{{ stats.image_count }}</div>
                <div class="stats-label">图片文件</div>
                <div class="text-muted mt-1">{{ stats.image_size }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body text-center">
                <i class="bi bi-camera-video stats-icon"></i>
                <div class="stats-number">{{ stats.video_count }}</div>
                <div class="stats-label">视频文件</div>
                <div class="text-muted mt-1">{{ stats.video_size }}</div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- 上传表单 -->
    <div class="col-md-4">
        <div class="card upload-card">
            <h3 class="card-title">上传新资源</h3>
            <form id="uploadForm" enctype="multipart/form-data">
                <div class="mb-3">
                    <label class="form-label">资源类型</label>
                    <select name="resource_type" class="form-select" id="resourceType">
                        <option value="image">图片</option>
                        <option value="text">文本</option>
                        <option value="video">视频</option>
                    </select>
                </div>
                
                <!-- 文件上传区域 -->
                <div id="fileUpload" class="mb-3">
                    <label class="form-label">选择文件</label>
                    <div class="upload-zone">
                        <input type="file" name="file" class="form-control" accept="image/*,video/*">
                        <div class="preview-container">
                            <img id="uploadPreview" class="upload-preview">
                            <video id="videoPreview" class="upload-preview" controls></video>
                        </div>
                    </div>
                    <small class="text-muted d-block mt-1">
                        支持的格式：
                        <span class="image-formats">图片(jpg, png, gif)</span>
                        <span class="video-formats">视频(mp4, webm)</span>
                    </small>
                </div>

                <!-- 文本输入区域 -->
                <div id="textInput" class="mb-3" style="display:none">
                    <label class="form-label">文本内容</label>
                    <textarea name="text_content" class="form-control" rows="4" placeholder="请输入文本内容"></textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label">描述</label>
                    <input type="text" name="description" class="form-control" placeholder="请输入描述" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">分类</label>
                    <select name="category" class="form-select">
                        <option value="image">图片</option>
                        <option value="text">文本</option>
                        <option value="video">视频</option>
                        <option value="other">其他</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label">标签</label>
                    <input type="text" name="tags" class="form-control" placeholder="使用逗号分隔多个标签">
                </div>

                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-cloud-upload"></i> 上传
                </button>
            </form>
        </div>
    </div>

    <!-- 资源列表 -->
    <div class="col-md-8">
        <div class="card resource-list-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title mb-0">资源列表</h3>
                <div class="list-actions">
                    <div class="input-group">
                        <input type="text" id="resourceFilter" class="form-control" placeholder="搜索资源...">
                        <button class="btn btn-outline-secondary" type="button" onclick="filterResources()">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div id="resourceList" class="resource-list">
                {% if error %}
                    <div class="alert alert-danger">{{ error }}</div>
                {% else %}
                    {% for doc in documents %}
                    <div class="resource-item" data-type="{{ doc.type }}">
                        <div class="d-flex">
                            <!-- 预览区域 -->
                            <div class="resource-preview me-3">
                                {% if doc.type == 'image' %}
                                    <img src="{{ url_for('static', filename=doc.uri) }}" 
                                         class="preview-image" alt="{{ doc.text }}">
                                {% elif doc.type == 'video' %}
                                    <video class="preview-video" controls>
                                        <source src="{{ url_for('static', filename=doc.uri) }}" 
                                                type="video/mp4">
                                        您的浏览器不支持视频播放
                                    </video>
                                {% else %}
                                    <i class="bi bi-file-text text-preview"></i>
                                {% endif %}
                            </div>
                            
                            <!-- 内容区域 -->
                            <div class="flex-grow-1">
                                <div class="resource-title mb-2">{{ doc.text }}</div>
                                <div class="resource-meta">
                                    <span class="badge bg-secondary me-2">{{ doc.type }}</span>
                                    {% if doc.category %}
                                        <span class="badge bg-info me-2">{{ doc.category }}</span>
                                    {% endif %}
                                    {% for tag in doc.tags %}
                                        <span class="badge bg-light text-dark me-1">{{ tag }}</span>
                                    {% endfor %}
                                </div>
                                <div class="text-muted small mt-2">
                                    创建时间: {{ doc.created_at }}
                                </div>
                            </div>
                            
                            <!-- 操作按钮 -->
                            <div class="ms-3">
                                <button class="btn btn-sm btn-danger" 
                                        onclick="deleteResource('{{ doc.id }}')">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 资源管理相关的 JavaScript 代码
document.addEventListener('DOMContentLoaded', function() {
    setupFilePreview('input[name="file"]');
});

// 删除资源
async function deleteResource(docId) {
    if (!confirm('确定要删除这个资源吗？')) return;
    
    try {
        const response = await fetch(`/resource/api/documents/${docId}`, {
            method: 'DELETE'
        });
        const result = await response.json();
        if (result.status === 'success') {
            window.location.reload();
        } else {
            alert('删除失败: ' + result.message);
        }
    } catch (error) {
        alert('删除失败: ' + error);
    }
}

// 处理上传
document.getElementById('uploadForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    
    try {
        const response = await fetch('/resource/upload', {
            method: 'POST',
            body: formData
        });
        const result = await response.json();
        alert(result.message);
        if (result.status === 'success') {
            this.reset();
            document.querySelector('#uploadPreview').style.display = 'none';
            window.location.reload();
        }
    } catch (error) {
        alert('上传失败: ' + error);
    }
});

// 资源类型切换
document.getElementById('resourceType').addEventListener('change', function() {
    const fileUpload = document.getElementById('fileUpload');
    const textInput = document.getElementById('textInput');
    const fileInput = document.querySelector('input[name="file"]');
    const textArea = document.querySelector('textarea[name="text_content"]');
    
    switch(this.value) {
        case 'text':
            fileUpload.style.display = 'none';
            textInput.style.display = 'block';
            fileInput.removeAttribute('required');
            textArea.setAttribute('required', '');
            break;
        case 'image':
            fileUpload.style.display = 'block';
            textInput.style.display = 'none';
            fileInput.setAttribute('accept', 'image/*');
            fileInput.setAttribute('required', '');
            textArea.removeAttribute('required');
            break;
        case 'video':
            fileUpload.style.display = 'block';
            textInput.style.display = 'none';
            fileInput.setAttribute('accept', 'video/*');
            fileInput.setAttribute('required', '');
            textArea.removeAttribute('required');
            break;
    }
});

// 文件预览
function setupFilePreview(inputSelector) {
    const input = document.querySelector(inputSelector);
    const imgPreview = document.getElementById('uploadPreview');
    const videoPreview = document.getElementById('videoPreview');
    
    input.addEventListener('change', function() {
        const file = this.files[0];
        if (!file) return;

        const reader = new FileReader();
        
        if (file.type.startsWith('image/')) {
            reader.onload = function(e) {
                imgPreview.src = e.target.result;
                imgPreview.style.display = 'block';
                videoPreview.style.display = 'none';
            }
            reader.readAsDataURL(file);
        } else if (file.type.startsWith('video/')) {
            reader.onload = function(e) {
                videoPreview.src = e.target.result;
                videoPreview.style.display = 'block';
                imgPreview.style.display = 'none';
            }
            reader.readAsDataURL(file);
        }
    });
}

// 刷新资源列表
function refreshResourceList() {
    window.location.reload();
}

// 过滤资源
function filterResources() {
    const filterText = document.getElementById('resourceFilter').value.toLowerCase();
    const items = document.querySelectorAll('.resource-item');
    
    items.forEach(item => {
        const text = item.querySelector('.resource-title').textContent.toLowerCase();
        const type = item.dataset.type.toLowerCase();
        const shouldShow = text.includes(filterText) || type.includes(filterText);
        item.style.display = shouldShow ? 'block' : 'none';
    });
}

// 监听搜索框输入
document.getElementById('resourceFilter')?.addEventListener('input', filterResources);
</script>
{% endblock %} 